Adds multi-select support by jtreminio · Pull Request #1360 · mcmonkeyprojects/SwarmUI

jtreminio · 2026-04-30T04:08:24Z

works across batch and history containers, synced to each other.
can be easily hooked into (see Adding Image Comparison #1345)
when enabled, clicking a card description selects the card

CleanShot.2026-04-29.at.23.31.21.mp4

mcmonkey4eva · 2026-05-02T03:12:42Z

 let imageHistoryBrowser = new GenPageBrowserClass('image_history', listOutputHistoryFolderAndFiles, 'imagehistorybrowser', 'Thumbnails', describeOutputFile, selectOutputInHistory,
    `<label for="image_history_sort_by">Sort:</label> <select id="image_history_sort_by"><option>Name</option><option>Date</option></select> <input type="checkbox" id="image_history_sort_reverse"> <label for="image_history_sort_reverse">Reverse</label> &emsp; <input type="checkbox" id="image_history_allow_anims" checked autocomplete="off"> <label for="image_history_allow_anims">Allow Animation</label>`);
+imageHistoryBrowser.enableBrowserMultiSelect = true;
+imageHistoryBrowser.keepBrowserMultiSelectKeyAfterPrune = function(key, namesInCurrentList) {


match existing patterns for function declarations

mcmonkey4eva · 2026-05-02T03:13:04Z


 function clickImageInBatch(div) {
    let imgElem = div.getElementsByTagName('img')[0];
+    let multiSelectKey = getImageFullSrc(div.dataset.src);


there shouldn't be any multiselect handling outside of the browser class like this

mcmonkey4eva · 2026-05-02T03:13:28Z

        }
        let isStarred = this.isStarred(model.data.name);
-        let starButton = { label: isStarred ? 'Unstar' : 'Star', onclick: () => { this.toggleStar(model.data.name); } };
+        let starButton = { label: isStarred ? 'Unstar' : 'Star', onclick: () => { this.toggleStar(model.data.name); }, can_multi: true };


Are you objecting to the , can_multi: true flag itself (how I've defined it, for example), or objecting to Star/Unstar action being available for multi-select action?

you editing the way star is handled for multi, which is already covered properly for images, and presets/models should handle it the same as images

Probably the best move is limit the PR to browser itself & images, preset/models can be separate

aka the universal rule of PR contributing: minimize the scope of edits per individual PR

mcmonkey4eva · 2026-05-02T03:13:53Z

                toggleStar(fullsrc, src);
-            }
+            },
+            can_multi: true


mcmonkey4eva · 2026-05-02T03:14:46Z

                    if (div) {
                        removeImageBlockFromBatch(div);
                    }
+                    if (imageHistoryBrowser.enableBrowserMultiSelect) {


this is questionably placed aaand also seems to be a mixup between the 'enable' and 'active' bools?

mcmonkey4eva · 2026-05-02T03:15:22Z

+        return true;
+    }
+    let currentImageBatchDiv = getRequiredElementById('current_image_batch');
+    for (let candidate of currentImageBatchDiv.querySelectorAll('.image-block:not(.image-block-placeholder)')) {


this is an odd query

mcmonkey4eva · 2026-05-02T03:15:44Z

-        { label: 'Direct Apply', onclick: () => applyOnePreset(preset.data) },
-        { label: preset.data.is_starred ? 'Unstar' : 'Star', onclick: () => togglePresetStar(preset) },
+        { label: 'Direct Apply', onclick: () => applyOnePreset(preset.data), can_multi: true },
+        { label: preset.data.is_starred ? 'Unstar' : 'Star', onclick: () => togglePresetStar(preset), can_multi: true },


mcmonkey4eva · 2026-05-02T03:16:03Z

        { label: 'Edit Preset', onclick: () => editPreset(preset.data) },
        { label: 'Duplicate Preset', onclick: () => duplicatePreset(preset.data) },
-        { label: 'Export Preset', onclick: () => exportOnePresetButton(preset.data) },
+        { label: 'Export Preset', onclick: () => exportOnePresetButton(preset.data), can_multi: true },


this can't function natively and needs separate impl

mcmonkey4eva · 2026-05-02T03:16:27Z

        this.runAfterUpdate = [];
        this.refreshHandler = (callback) => callback();
        this.checkIsSmall();
+        this.enableBrowserMultiSelect = false;


should probably be allowMultiSelect

mcmonkey4eva · 2026-05-02T03:17:18Z

        this.checkIsSmall();
+        this.enableBrowserMultiSelect = false;
+        this.multiSelectActive = false;
+        this.multiSelectedKeys = new Set();


this is liable to lead to state tracking inconsistencies, as jank as it feels putting class or .dataset's on the block divs is probably the stablest way to track

mcmonkey4eva · 2026-05-02T03:19:12Z

                textBlock.tabIndex = 0;
                textBlock.innerHTML = desc.description;
                div.appendChild(textBlock);
+                div.addEventListener('click', (e) => {


don't need a separate click handler, the select handler should cover it

jtreminio · 2026-05-02T16:05:17Z

+        let getMeta = (metadata) => metadata ? (JSON.parse(metadata) || {}) : {};
+        let metaParsed = getMeta(metadata);
+        let isStarred = (e) => {
+            let currentMeta = e && e.dataset ? getMeta(e.dataset.metadata) : {};
+            if (Object.keys(currentMeta).length == 0) {
+                currentMeta = metaParsed;
+            }
+            return currentMeta.is_starred;
+        };


There was a bug in your original implementation:

metadata would initially not exist on an item, causing exception on let metaParsed = JSON.parse(metadata);

metadata would be stale on reads below. Clicking "Enable Starred" would add the needed metadata and also star the items, but then clicking "Disable(d) Starred" would still see stale metadata and not unstar items

Fixed speling

mcmonkey4eva · 2026-05-02T20:55:08Z

                let textBlock = createDiv(null, 'model-descblock');
                textBlock.tabIndex = 0;
                textBlock.innerHTML = desc.description;
+                textBlock.addEventListener('click', (e) => {


What's with all these new click listeners?

This one is necessary. I couldn't ~~need~~ get multi-select click to select a card if I clicked the description otherwise.

mcmonkey4eva · 2026-05-02T20:57:03Z

+        }
+        let items = [];
+        for (let child of this.contentDiv.children) {
+            if (child.dataset && child.dataset.name && child.classList.contains('browser-multiselect-item-selected')) {


querySelectorAll should do this quick n simple

mcmonkey4eva · 2026-05-16T05:57:47Z

+    }
+
+    /**
+     * Labels for bulk actions shared by every selected item, respecting `can_multi` / `multi_only`.


This feels like AI slop. Misinterpreted keywords and then proudly documented respect for the misunderstood keyword.

To be fair, this PR has gone through several major revisions after feedback. I try to keep comments up to date.

It does point to my initial PR diffs probably being overly large if I sometimes mislabel a function, which is something I'm actively working on for the SwarmUI project.

mcmonkey4eva · 2026-05-16T05:58:00Z

+        if (files.length == 0) {
+            return [];
+        }
+        let eligiblePerFile = [];


actually wtf is this whole function? Why was this built like this at all??? wat.

I'm reducing the diff here, but this function actually does something important - it gates specific multi-select actions on filetypes the user selects.

A user can select any number of image, video, and audio files in the history browser and select an action like Star, or Delete.

However, it makes less sense for a user to select an image + audio file and allow them to do a media comparison.

The current implementation just iterates through each selected file and removes actions that cannot be applied to the entire set. Slightly wordy, I can reduce the diff without getting too clever, but I would push back strongly on this being removed completely.

"image + audio" comparison is stupid and I would instead say an image + video comparison wouldn't make much sense. However, it would make more sense than image+audio.

I can maybe see a scenario where a user wants to popup an image and a video into a comparison modal to eyeball a bit? Not much of a scenario but if you want this code removed now I'm open to it.

mcmonkey4eva · 2026-05-16T06:41:27Z

Issues from testing:

Multi-select overlaps with regular select. The image I have selected looks like it is selected for multi-select but isn't actually. This is weird. Probably kill any singleselect classes.
After testing, I see some value to having a set like you did before: state is currently killed on any refresh, so need to persist past that. I'd minimize the set handling to be exclusively just a tool to reapply the selected class after a refresh (grab a set of what elems have the class before, apply back after, call it a day)

mcmonkey4eva · 2026-05-18T19:29:56Z

            });
        }
        else {
+            if (this.preservedMultiSelect.size == 0) {


This set is used and cleared directly within one function, so presumably can safely be function-local rather than on the instance ctor?

kind of. Doing a filter or depth change doesn't need an ~~object~~ class instance variable, but the browser refresh button nukes everything. I couldn't get state to stick otherwise. I'm pushing one small change cleaning up tiny odds and ends but unless you have a suggested alternative method, this is the way I could get it to work.

Note that if a user clicks the Refresh button twice very quickly, state is still lost. I was going to add a timeout but then PR starts touching things unrelated to core feature.

jtreminio · 2026-05-18T19:56:45Z

+            let desc = this.describe(file);
+            let labels = new Set();
+            for (let button of desc.buttons) {
+                if (button.can_multi && (button.max_selected == null || files.length <= button.max_selected)) {


TBH I'm not a fan of the change you made here. The previous split if blocks were wordy and we could have merged a few of them, but this if now feels overloaded.

… enough for a Set to be worth it

jtreminio added 3 commits April 29, 2026 23:08

Adds multi-select support

28b188f

Update styling and activated icon

6e5b010

Adds max_selected

db8e592

jtreminio marked this pull request as ready for review April 30, 2026 04:51

jtreminio mentioned this pull request Apr 30, 2026

Adding Image Comparison #1345

Draft

jtreminio marked this pull request as draft April 30, 2026 22:21

jtreminio added 3 commits April 30, 2026 17:39

When multi-select button active, clicking card description selects it

a7d7404

multi-select works on batch container

284fe47

Delete multiple image fix

5b32607

jtreminio marked this pull request as ready for review April 30, 2026 23:45

mcmonkey4eva reviewed May 2, 2026

View reviewed changes

jtreminio added 3 commits May 2, 2026 10:37

Reduce scope; pr feedback

c762599

Adding back multi-select starring; unstarring currently not working

64bfc8c

Fix stale metadata lookup; nonexistant metadata

867ab51

jtreminio commented May 2, 2026

View reviewed changes

jtreminio requested a review from mcmonkey4eva May 2, 2026 16:06

mcmonkey4eva reviewed May 2, 2026

View reviewed changes

jtreminio and others added 2 commits May 3, 2026 17:17

querySelectorAll

9ee9b5e

partial cleanup

cad76be

mcmonkey4eva reviewed May 16, 2026

View reviewed changes

PR feedback

4d5896d

mcmonkey4eva reviewed May 18, 2026

View reviewed changes

jtreminio added 2 commits May 18, 2026 14:44

Slight cleanup; Array in favor of unneeded Set; force CSS style

5958960

Reduce diff

e41933f

jtreminio commented May 18, 2026

View reviewed changes

jtreminio added 2 commits May 18, 2026 14:58

Prefer array to Set: the realistic possible number of items not large…

93fbdb1

… enough for a Set to be worth it

Merge branch 'master' into multi-select

9147618

Uh oh!

Conversation

jtreminio commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcmonkey4eva May 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcmonkey4eva May 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jtreminio May 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcmonkey4eva commented May 16, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jtreminio May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jtreminio commented Apr 30, 2026 •

edited

Loading

mcmonkey4eva May 2, 2026 •

edited

Loading

mcmonkey4eva May 2, 2026 •

edited

Loading

jtreminio May 3, 2026 •

edited

Loading

jtreminio May 18, 2026 •

edited

Loading